<template>
    <div class="system-user-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="850px">
            <el-form ref="userDialogFormRef" :model="state.content" :rules="formRules" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item prop="name" label="时段名称">
                            <el-input v-model="state.content.name" placeholder="请输入门禁时段名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <table class="table">
                            <thead>
                                <tr class="firstHead">
                                    <th colspan="1" rowspan="2">星期</th>
                                    <th colspan="2">时间段1</th>
                                    <th colspan="2">时间段2</th>
                                    <th colspan="2">时间段3</th>
                                </tr>
                                <tr class="twoHead">
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>周日</td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v0StartOnA" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v0EndOnA"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v0StartOnB" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v0EndOnB"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v0StartOnC" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v0EndOnC"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                </tr>
                                <tr>
                                    <td>周一</td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v1StartOnA" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v1EndOnA"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v1StartOnB" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v1EndOnB"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v1StartOnC" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v1EndOnC"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                </tr>
                                <tr>
                                    <td>周二</td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v2StartOnA" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v2EndOnA"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v2StartOnB" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v2EndOnB"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v2StartOnC" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v2EndOnC"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                </tr>
                                <tr>
                                    <td>周三</td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v3StartOnA" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v3EndOnA"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v3StartOnB" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v3EndOnB"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v3StartOnC" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v3EndOnC"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                </tr>
                                <tr>
                                    <td>周四</td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v4StartOnA" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v4EndOnA"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v4StartOnB" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v4EndOnB"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v4StartOnC" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v4EndOnC"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                </tr>
                                <tr>
                                    <td>周五</td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v5StartOnA" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v5EndOnA"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v5StartOnB" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v5EndOnB"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v5StartOnC" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v5EndOnC"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                </tr>
                                <tr>
                                    <td>周六</td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v6StartOnA" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v6EndOnA"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v6StartOnB" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v6EndOnB"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                    <td><el-time-picker size="default" style="width:100px"
                                            v-model="state.content.v6StartOnC" :format="'HH:mm'" :value-format="'HH:mm'" />
                                    </td>
                                    <td><el-time-picker size="default" style="width:100px" v-model="state.content.v6EndOnC"
                                            :format="'HH:mm'" :value-format="'HH:mm'" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="onContinuneSubmit" v-show="state.dialog.type !== 1" size="default">{{
                        t('message.btnName.continueSubmit')
                    }}</el-button>
                    <el-button @click="onSubmit" type="success" size="default">{{ t('message.btnName.submit') }}</el-button>
                    <el-button @click="onCancel" size="info">{{ t('message.btnName.cancel') }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" >
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useAccessTimezoneCreateApi, useAccessTimezoneUpdateApi, useAccessTimezoneQueryApi } from '/@/api/access/timezone';

// 定义子组件向父组件传值/事件
const { t } = useI18n();
const emit = defineEmits(['refresh']);

// 定义变量内容
const userDialogFormRef = ref();
const useContent = () => {
    return {
        code: '', // 门禁时段编号
        name: '', // 门禁时段名称
        v0StartOnA: "00:01",
        v0EndOnA: "23:59",
        v0StartOnB: "00:01",
        v0EndOnB: "23:59",
        v0StartOnC: "00:01",
        v0EndOnC: "23:59",

        v1StartOnA: "00:00",
        v1EndOnA: "00:00",
        v1StartOnB: "00:00",
        v1EndOnB: "00:00",
        v1StartOnC: "00:00",
        v1EndOnC: "00:00",

        v2StartOnA: "00:00",
        v2EndOnA: "00:00",
        v2StartOnB: "00:00",
        v2EndOnB: "00:00",
        v2StartOnC: "00:00",
        v2EndOnC: "00:00",

        v3StartOnA: "00:00",
        v3EndOnA: "00:00",
        v3StartOnB: "00:00",
        v3EndOnB: "00:00",
        v3StartOnC: "00:00",
        v3EndOnC: "00:00",

        v4StartOnA: "00:00",
        v4EndOnA: "00:00",
        v4StartOnB: "00:00",
        v4EndOnB: "00:00",
        v4StartOnC: "00:00",
        v4EndOnC: "00:00",

        v5StartOnA: "00:00",
        v5EndOnA: "00:00",
        v5StartOnB: "00:00",
        v5EndOnB: "00:00",
        v5StartOnC: "00:00",
        v5EndOnC: "00:00",

        v6StartOnA: "00:00",
        v6EndOnA: "23:59",
        v6StartOnB: "00:00",
        v6EndOnB: "23:59",
        v6StartOnC: "00:00",
        v6EndOnC: "23:59",
    }
}
const state = reactive({
    content: useContent(),
    dialog: {
        isShowDialog: false,
        type: 0,
        title: '',
    },
});
// 表单校验
const formRules = ref({
    code: [
        { required: true, message: '必填项不能为空', trigger: 'blur' },
        { min: 1, max: 40, message: '工号必须1-40位字母数字组合而成', trigger: 'blur' },
        // { pattern: /^[a-z1-9]/, message: '工号必须非0数字或小写字母开头', trigger: 'blur' },
    ],
    name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
    // mobile: [{ pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: '请输入正确手机号', trigger: 'blur' },],
})


// 打开弹窗
const openDialog = (option: string, code: string) => {
    if (option === 'edit') {
        state.dialog.title = t('message.btnName.edit');
        state.dialog.type = 1
        useAccessTimezoneQueryApi(code).then(({ content }) => {
            state.content = content
        })
    } else {
        state.dialog.title = t('message.btnName.addRow');
        state.dialog.type = 0
        state.content = useContent()
    }
    state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
    state.content = useContent()
    emit('refresh');
};
// 取消
const onCancel = () => {
    closeDialog();
};



// 提交
const onSubmit = () => {
    userDialogFormRef.value.validate((valid: boolean) => {
        if (!valid) {
            return false
        }
        if (state.dialog.type === 1) {
            useAccessTimezoneUpdateApi(state.content).then(({ content }) => {
                console.log(content);
                ElMessage.success({
                    message: '操作成功',
                    duration: 500,
                    onClose: () => {
                        state.content = useContent()
                    }
                })
            }).then(() => {
                closeDialog()
            })
        } else {
            useAccessTimezoneCreateApi(state.content).then(({ content }) => {
                console.log(content);
                ElMessage.success({
                    message: '操作成功',
                    duration: 500,
                    onClose: () => {
                        state.content = useContent()
                    }
                })
            }).then(() => {
                closeDialog()
            })
        }
    })
};

// 提交并继续
const onContinuneSubmit = () => {
    userDialogFormRef.value.validate((valid: boolean) => {
        if (!valid) {
            return false
        }
        useAccessTimezoneCreateApi(state.content).then(() => {
            ElMessage.success({
                message: '操作成功,继续新增',
                duration: 1000,
                onClose: () => {
                    state.content = useContent()
                }
            })
        })
    })
};
// 暴露变量
defineExpose({
    openDialog,
});
</script>
<style scoped lang="scss">
.table {
    width: 800px;
    border-collapse: collapse;

    td,
    th {
        font-style: normal;
        font-weight: normal;
        text-align: center;
        border: 1px solid #eee;
        padding: 5px;
    }

    tr {
        height: 48px;
    }

    .twoHead th {
        padding: 0 10px;
        font-size: 14px;
        font-weight: normal;
    }

    .firstHead th {
        font-size: 14px;
        font-weight: bold;
    }

    table {
        border: none;
        border-collapse: collapse;
        border-color: #D8DFE6;
    }

    table thead {
        background: #F3FDFF;
    }
}
</style>
